<template>
  <component :is="getComponentItem" :isMobile="isMobileType"></component>
</template>

<script lang="ts">
export default {
  name: 'MenuNavigation',
};
</script>

<script setup lang="ts">
import { getDraggableNumber, getExhibitsHeightRest, getdisabledY } from '@/utils/getRemComputed';
import { ref, reactive, watch, nextTick, computed } from 'vue';
import { exbitMenuShow, exbitListMenuShow } from '@/hooks/menuHooks';
import { commonDataStore, useProjectStore } from '@/store';
import style1 from './style/style1.vue';
import style2 from './style/style2.vue';
import style3 from './style/style3.vue';
import style4 from './style/style4.vue';
import style5 from './style/style5.vue';
import style6 from './style/style6.vue';
import style7 from './style/style7.vue';
import style8 from './style/style8.vue';
import style9 from './style/style9.vue';
import style11 from './style/style11.vue';
import style10 from './style/style10.vue';
import style12 from './style/style12.vue';
import style13 from './style/style13.vue';
import style14 from './style/style14.vue';
import style15 from './style/style15.vue';
import style16 from './style/style16.vue';
import style17 from './style/style17.vue';
const store = useProjectStore();
const commonStore = commonDataStore();
const isMobileType = ref(true);
const init = () => {
  const isMobile = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
  );

  if (isMobile) {
    isMobileType.value = false;
  }
};
init();

const getComponentItem = computed(() => {
  let component: Object;
  switch (commonStore.templateId) {
    case 546821049266245:
      component = style1;
      break;
    case 568727972499525:
      component = style2;
      break;
    case 581876609753157:
      component = style3;
      break;
    case 584041224159301:
      component = style4;
      break;
    case 594187892883525:
      component = style5;
      break;
    case 598779929522245:
      component = style6;
      break;
    case 607270742659141:
      component = style7;
      break;
    case 609108365123653:
      component = style8;
      break;
    case 618322755817541:
      component = style9;
      break;
    case 621784378253381:
      component = style11;
      break;
    case 621494527193157:
      component = style10;
      break;
    case 628149200830533:
      component = style12;
      break;
    case 643443922464837:
      component = style13;
      break;
    case 645568970317893:
      component = style14;
      break;
    case 651173498134597:
      component = style15;
      break;
    case 661088851107909:
      component = style16;
      break;
    case 688032033431621:
      component = style17;
      break;
    default:
      component = style1;
      break;
  }
  // return style7
  return component;
});
</script>

<style lang="less" scoped></style>
